<html>

<head>
    <meta charset="utf-8">
    <title>微博</title>
    <!-- 引入layui的css文件 -->
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <!-- 引入layui的js文件 -->
    <style>
        /* 定义一些样式 */
        .post {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            display: flex;
            /* 使用flex布局 */
            align-items: flex-start;
            /* 垂直对齐到顶部 */
        }

        .comment {
            margin: 10px 20px;
            padding: 10px;
            border: 1px solid #eee;
            display: flex;
            /* 使用flex布局 */
            align-items: flex-start;
            /* 垂直对齐到顶部 */
        }

        .reply {
            margin: 10px 30px;
            padding: 10px;
            border: 1px solid #151515;
            display: flex;
            /* 使用flex布局 */
            align-items: flex-start;
        }

        .user {
            font-weight: bold;
            margin-right: 10px;
            /* 设置右边距 */
        }

        .content {
            margin: 5px 0;
        }

        .image {
            max-width: 150px;
        }

        .video {
            max-width: 300px;
        }

        .avatar {
            width: 50px;
            /* 设置头像的宽度 */
            height: 50px;
            /* 设置头像的高度 */
            border-radius: 50%;
            /* 设置头像为圆形 */
            margin-right: 10px;
            /* 设置右边距 */
        }

        .topbar {
            background-color: #1da1f2;
            /* 设置顶部栏的背景颜色为Twitter的蓝色 */
            height: 50px;
            /* 设置顶部栏的高度 */
            display: flex;
            /* 使用flex布局 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
        }

        .logocenter {
            color: white;
            /* 设置logo的颜色为白色 */
            font-size: 30px;
            /* 设置logo的字体大小 */
        }

        .wrapper-signup {
            max-width: 600px;
            /* 设置注册表单的最大宽度 */
            margin: auto;
            /* 设置注册表单的水平居中 */
        }

        .signup-wrapper {
            text-align: center;
            /* 设置注册表单的文本居中 */
        }

        .signup {
            margin-top: 20px;
            /* 设置注册表单的上边距 */
        }

        .field {
            margin-bottom: 10px;
            /* 设置输入框的下边距 */
        }

        .sidetip {
            display: none;
            /* 默认隐藏错误提示 */
        }

        .error {
            display: block;
            /* 显示错误提示 */
            color: red;
            /* 设置错误提示的颜色为红色 */
        }

        .submit {
            width: 100%;
            /* 设置提交按钮的宽度为100% */
        }
    </style>
</head>

<body>

    

    <h1>欢迎来到微博</h1>
    <h2>这里是所有的帖子和评论</h2>
    <!-- 定义一个div元素，用来显示帖子和评论 -->
    <div id="container"></div>
    <script>
        // 使用layui的模块化方式，引入flow模块
        layui.use('flow', function () {
            // 获取flow模块的对象
            var flow = layui.flow;
            var $ = layui.jquery;
            // 调用flow的load方法，实现流加载的功能
            flow.load({
                // 指定要加载的容器元素
                elem: '#container',
                isAuto: true,
                done: function (page, next) {
                    // 定义一个变量，用来存储拼接的html字符串
                    var html = '';
                    // 使用jquery的ajax方法，向后端发送请求，获取数据
                    $.ajax({
                        type: "GET",
                        url: "http://169.254.202.137:8080/RainbowCloud_war_exploded/GetPost?page=" + page, // 后端的Servlet路径，加上页码参数
                        dataType: "json", // 预期返回的数据类型是json
                        success: function (data) {
                            var totalPage = (data.count + 5 - 1) / 5;
                            // 如果请求成功，遍历返回的数据，将每个帖子和评论的信息拼接成html字符串
                            for (var i = 0; i < data.data.length; i++) {
                                var post = data.data[i]; // 获取每个帖子对象
                                // 拼接帖子的信息
                                html += '<div class="post">';
                                html += '<img class="avatar" src="data:image/png;base64,' + post.publishavatar + '">' + '<p class="user" hidden>'+ post.pid +'</p>' 
                                html += '<p class="user">' + post.userinfo.nickname + '</p>';
                                html += '<p class="content">' + post.pcontent + '</p>';
                                if (post.pimage) { // 如果帖子有图片，显示图片
                                    html += '<img class="image" src="data:image/png;base64,' + post.pimage + '">';
                                }
                                if (post.pvideo) { // 如果帖子有视频，显示视频
                                    html += '<video class="video" src="http://169.254.202.137:8080/RainbowCloud_war_exploded/' + post.pvideo + '" controls></video>';
                                }
                                html += '</div>';
                                // 获取帖子的评论数组
                                var comments = post.comments;
                                if(comments == null)
                                continue
                                // 遍历评论数组，拼接评论的信息
                                for (var j = 0; j < comments.length; j++) {
                                    var comment = comments[j]; // 获取每个评论对象
                                    // 拼接评论的信息
                                    html += '<div class="comment">';
                                    html += '<p class="user" hidden>'+ comment.pid +'</p>' 
                                    html += '<p class="user">' + comment.userinfo.nickname + '</p>';
                                    html += '<p class="content">' + comment.pcontent + '</p>';
                                    if (comment.pimage) { // 如果评论有图片，显示图片
                                        html += '<img class="image" src="data:image/png;base64,' + comment.pimage + '">';
                                    }
                                    if (comment.pvideo) { // 如果评论有视频，显示视频
                                        html += '<video class="video" src="' + comment.pvideo + '" controls></video>';
                                    }
                                    html += '</div>';

                                    var replys = comment.comments;
                                    if(replys==null)
                                    continue

                                    for (var k = 0; k < replys.length; k++) {
                                        var reply = replys[k];

                                        html += '<div class="reply">';
                                        html += '<p class="user" hidden>'+ reply.pid +'</p>' 
                                        html += '<p class="user">' + reply.userinfo.nickname + '</p>';
                                        html += '<p class="content">' + reply.pcontent + '</p>';
                                        if (reply.pimage) { // 如果评论有图片，显示图片
                                            html += '<img class="image" src="data:image/png;base64,' + reply.pimage + '">';
                                        }
                                        if (reply.pvideo) { // 如果评论有视频，显示视频
                                            html += '<video class="video" src="' + reply.pvideo + '" controls></video>';
                                        }
                                        html += '</div>';
                                    }
                                }
                            }
                            // 调用next方法，将拼接好的html字符串添加到容器元素中，并传入总页数
                            // 假设总页数是10
                            next(html, page < totalPage);
                        },
                        error: function (error) {
                            // 如果请求失败，显示错误信息
                            alert("请求失败：" + error);
                        }
                    });
                }
            });
            $("#container").on("click",".post",function(obj){
                console.log($(this).find("p:hidden").text());
            })
        });
    </script>
</body>

</html>